<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form size="small" inline label-width="120px">
          <el-form-item :label="$t('shiJianXuanZe') + '：'" class="width100">
              <el-radio-group
                v-model="tableFrom.dateLimit"
                type="button"
                class="mr20"
                size="small"
                @change="selectChange(tableFrom.dateLimit)"
              >
                <el-radio-button
                  v-for="(item, i) in fromList.fromTxt"
                  :key="i"
                  :label="item.val"
                >{{ $t(item.text) }}
                </el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="timeVal"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                size="small"
                type="daterange"
                placement="bottom-end"
                :start-placeholder="$t('kaiShiRiQi')"
                :end-placeholder="$t('jieShuRiQi')"
                style="width: 220px"
                @change="onchangeTime"
              />
            </el-form-item>
          <el-form-item label="halyk订单编号：">
            <el-input v-model="tableFrom.haOrderCode" placeholder="请输入halyk订单编号" class="selWidth mr20" clearable>
              <el-button slot="append" icon="el-icon-search" @click="getList(1)"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="small" @click="importFn">导入</el-button>

      </div>
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="small" :span-method="objectSpanMethod" border>
        <el-table-column type="index" label="序号" width="50"/>
        <el-table-column prop="haOrderCode" label="halyk订单编号" min-width="90" />
        <el-table-column prop="platformOrderCode" label="平台订单编号" min-width="90" />
        <el-table-column prop="partnerAmount" label="合作伙伴总金额" min-width="90" />
        <el-table-column prop="totalAmount" label="商户总金额" min-width="90" />
        <el-table-column prop="commissionRate" label="佣金比例" min-width="90" />
        <el-table-column prop="commissionAmount" label="佣金金额" min-width="90" />
        <el-table-column prop="platformIncome" label="平台总收益" min-width="90" />
        <el-table-column prop="currency" :label="$t('biZhong')" min-width="80">
          <template slot-scope="scope">{{ $t('jianGe') }}</template>
        </el-table-column>
        <el-table-column prop="payDate" label="付款时间" min-width="140" />
        <el-table-column prop="createTime" label="创建时间" min-width="140" />
        <el-table-column prop="totalFreight" label="总物流费用" min-width="90" />
        <el-table-column prop="merId" label="商户ID" min-width="90" />
        <el-table-column prop="merName" label="商户名称" min-width="90" />
        <el-table-column prop="merOrderCode" label="商户订单号" min-width="90" />
        <el-table-column prop="merTotalAmount" label="商户金额" min-width="90" />
        <el-table-column prop="merFreight" label="商户物流费用" min-width="90" />
        <el-table-column prop="productCount" label="商品数量" min-width="90" />
        <el-table-column prop="skuOnlyCode" label="SKU" min-width="90" />
        <el-table-column prop="totalPrice" label="SKU单价" min-width="90" />
        <el-table-column prop="payNum" label="SKU数量" min-width="90" />
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>

    <batchImportDialog ref="batchImportDialogRef" @updata="getList"/>
  </div>
</template>

<script>
import { haOrderBillApi} from '@/api/financial';
import batchImportDialog from './dialog/batchImportDialog';
export default {
  name: 'statement',
  components:{batchImportDialog},
  data() {
    return {
      listLoading: true,
      tableData: {
        data: [],
        total: 0,
      },
      tableFrom: {
        page: 1,
        limit: 20,
        haOrderCode: '',
      },
      timeVal: [],
      fromList: this.$constants.fromList,
    };
  },
  mounted() {
    this.getList(1);
  },
  methods: {
    // 选择时间
    selectChange(tab) {
      this.timeVal = []
      this.tableFrom.page = 1
      this.getList()
      // this.getOrderStatusNum()
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e
      this.tableFrom.dateLimit = e ? this.timeVal.join(',') : ''
      this.tableFrom.page = 1
      this.getList()
      // this.getOrderStatusNum()
    },
    // 列表
    getList(num) {
      this.tableFrom.page = num ? num : this.tableFrom.page;
      this.listLoading = true;
      haOrderBillApi(this.tableFrom)
        .then((res) => {
          const list = [];
          res.list.forEach((item) => {
              if(item.merchantBillDTOList){
                item.merchantBillDTOList.forEach((item2) => {
                  if(item2.billDetailList){
                    item2.billDetailList.forEach(item3=>{
                      list.push({
                        ...item3,
                        ...item2,
                        ...item
                      });
                    })
                  }else{
                    list.push({
                      ...item2,
                      ...item
                    });
                  }
                });
              }else{
                list.push(item);
              }
          });

          this.tableData.data = list;
          this.tableData.total = res.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        })
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList();
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList();
    },
    importFn(){
      this.$refs.batchImportDialogRef.show()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        ['haOrderCode','platformOrderCode','partnerAmount','totalAmount','commissionRate','commissionAmount','platformIncome','currency','payDate','createTime','totalFreight'].includes(column.property)
        || column.type === 'index'
      ) {
        if (rowIndex === 0 || row.mainId != this.tableData.data[rowIndex - 1].mainId) {
          let rowspan = 0;
          this.tableData.data.forEach((element) => {
            if (element.mainId === row.mainId) {
              rowspan++;
            }
          });
          return [rowspan, 1];
        }else{
          return [0, 0];
        }
      }
      else if (
        ['merId','merName','merOrderCode','merTotalAmount','merFreight','productCount'].includes(column.property)
        &&row.merBillId
      ) {
        if (rowIndex === 0 || row.merBillId != this.tableData.data[rowIndex - 1].merBillId) {
          let rowspan = 0;
          this.tableData.data.forEach((element) => {
            if (element.merBillId === row.merBillId) {
              rowspan++;
            }
          });

          return [rowspan, 1];
        }else{
          return [0, 0];
        }
      }
      else if (
        ['skuOnlyCode','totalPrice','payNum'].includes(column.property)&&row.id
      ) {
        if (rowIndex === 0 || row.id != this.tableData.data[rowIndex - 1].id) {
          let rowspan = 0;
          this.tableData.data.forEach((element) => {
            if (element.id === row.id) {
              rowspan++;
            }
          });

          return [rowspan, 1];
        }else{
          return [0, 0];
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.selWidth {
  width: 300px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.tabBox_tit {
  width: 60%;
  font-size: 12px !important;
  margin: 0 2px 0 10px;
  letter-spacing: 1px;
  padding: 5px 0;
  box-sizing: border-box;
}
.el-menu-item {
  font-weight: bold;
  color: #333;
}
::v-deep.el-dialog__header {
  text-align: left;
}
.el-col {
  position: relative;
  .el-divider--vertical {
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    margin: 0;
  }
}
.grid-content {
  padding: 0 15px;
  display: block;
  .title,
  .color_red,
  .color_gray {
    display: block;
    line-height: 20px;
  }
  .color_red {
    color: red;
    font-weight: bold;
  }
  .color_gray {
    color: #333;
    font-weight: bold;
  }
  .count {
    font-size: 12px;
  }
  .list {
    margin-top: 20px;
    .item {
      overflow: hidden;
      margin-bottom: 10px;
    }
    .name,
    .cost {
      line-height: 20px;
    }
    .cost {
      text-align: right;
      span {
        display: block;
      }
    }
    .name,
    .cost_count {
      font-size: 12px;
    }
    .cost_count {
      margin-top: 10px;
    }
    .cost_num {
      font-weight: bold;
      color: #333;
    }
  }
}
</style>
